<template>
  <view class="learn-list-container">
    <view
      class="list-card"
      v-for="(card, index) in list"
      :key="index"
      @click="open111(index)"
    >
      <view class="fm-box">
        <u-image width="100%" height="200rpx" :src="card.F_Img"></u-image>
      </view>
      <view class="mesagess-box">
        <h1 class="course-name u-line-2">{{ card.F_Classtitle }}</h1>
        <p class="course-num">共{{ card.F_Classnum }}课时</p>
        <view class="messafe-bottom">
          <view class="progress">
            <u-icon name="clock-fill" color="#1776CE" size="32"></u-icon>
            <p class="progress-text">已完成100%</p>
          </view>
          <u-icon name="arrow-right" color="#B9BEC3" size="24"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import resources from "@/libs/resources.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { getDictionaryDataSelector, getDataInterfaceRes } from "@/api/common";
import request from "@/utils/request";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      sortValue: "",
      ListCard: [
        {
          CourseName: "民爆企业安全生产标准化全生产标准化",
          CourseNum: "5节",
          Progress: "已完成100%",
          ImgUrl: "/static/image/learnapp/video_fm@2x.png",
        },
        {
          CourseName: "民爆企业安全生产标准化222",
          CourseNum: "15节",
          Progress: "已完成98%",
          ImgUrl: "/static/image/learnapp/video_fm@2x.png",
        },
        {
          CourseName:
            "民爆企业安全生产标准化民爆企业安全生产标准化民爆企业安全生产标准化",
          CourseNum: "15节",
          Progress: "已完成98%",
          ImgUrl: "/static/image/learnapp/video_fm@2x.png",
        },
      ],
      searchForm: {
        companyname: undefined,
        companytitle: undefined,
        creatortime: undefined,
        username: undefined,
        gender: undefined,
        cardid: undefined,
        education: undefined,
        health: undefined,
        nativeplace: undefined,
        homeaddress: undefined,
        jointime: undefined,
        typework: undefined,
      },
      downOption: {
        use: true,
        auto: false,
      },
      upOption: {
        page: {
          num: 0,
          size: 20,
          time: null,
        },
        empty: {
          use: true,
          icon: resources.message.nodata,
          tip: "暂无数据",
          fixed: true,
          top: "300rpx",
          zIndex: 5,
        },
        textNoMore: "没有更多数据",
        toTop: {
          bottom: 250,
        },
      },
      genderOptions: [
        { fullName: "男", id: "1" },
        { fullName: "女", id: "2" },
      ],
      genderProps: { label: "fullName", value: "id" },
      educationOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      educationProps: { label: "fullName", value: "id" },
      healthOptions: [
        { fullName: "健康", id: "1" },
        { fullName: "不健康", id: "2" },
      ],
      healthProps: { label: "fullName", value: "id" },
      list: [],
      listQuery: {
        sort: "desc",
        sidx: "",
        keyword: "",
        json: "",
      },
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      sortOptions: [
        {
          label: "公司名称降序",
          sidx: "companyname",
          value: "companynamedesc",
          sort: "desc",
        },
        {
          label: "公司名称升序",
          sidx: "companyname",
          value: "companynameasc",
          sort: "asc",
        },
        {
          label: "职称降序",
          sidx: "companytitle",
          value: "companytitledesc",
          sort: "desc",
        },
        {
          label: "职称升序",
          sidx: "companytitle",
          value: "companytitleasc",
          sort: "asc",
        },
        {
          label: "建档时间降序",
          sidx: "creatortime",
          value: "creatortimedesc",
          sort: "desc",
        },
        {
          label: "建档时间升序",
          sidx: "creatortime",
          value: "creatortimeasc",
          sort: "asc",
        },
        {
          label: "名字降序",
          sidx: "username",
          value: "usernamedesc",
          sort: "desc",
        },
        {
          label: "名字升序",
          sidx: "username",
          value: "usernameasc",
          sort: "asc",
        },
        {
          label: "性别降序",
          sidx: "gender",
          value: "genderdesc",
          sort: "desc",
        },
        {
          label: "性别升序",
          sidx: "gender",
          value: "genderasc",
          sort: "asc",
        },
        {
          label: "身份证号降序",
          sidx: "cardid",
          value: "cardiddesc",
          sort: "desc",
        },
        {
          label: "身份证号升序",
          sidx: "cardid",
          value: "cardidasc",
          sort: "asc",
        },
        {
          label: "学历降序",
          sidx: "education",
          value: "educationdesc",
          sort: "desc",
        },
        {
          label: "学历升序",
          sidx: "education",
          value: "educationasc",
          sort: "asc",
        },
        {
          label: "健康状况降序",
          sidx: "health",
          value: "healthdesc",
          sort: "desc",
        },
        {
          label: "健康状况升序",
          sidx: "health",
          value: "healthasc",
          sort: "asc",
        },
        {
          label: "籍贯降序",
          sidx: "nativeplace",
          value: "nativeplacedesc",
          sort: "desc",
        },
        {
          label: "籍贯升序",
          sidx: "nativeplace",
          value: "nativeplaceasc",
          sort: "asc",
        },
        {
          label: "家庭住址降序",
          sidx: "homeaddress",
          value: "homeaddressdesc",
          sort: "desc",
        },
        {
          label: "家庭住址升序",
          sidx: "homeaddress",
          value: "homeaddressasc",
          sort: "asc",
        },
        {
          label: "入厂时间降序",
          sidx: "jointime",
          value: "jointimedesc",
          sort: "desc",
        },
        {
          label: "入厂时间升序",
          sidx: "jointime",
          value: "jointimeasc",
          sort: "asc",
        },
        {
          label: "从事工种降序",
          sidx: "typework",
          value: "typeworkdesc",
          sort: "desc",
        },
        {
          label: "从事工种升序",
          sidx: "typework",
          value: "typeworkasc",
          sort: "asc",
        },
      ],
      menuId: "",
    };
  },
  onLoad(e) {
    this.menuId = e.menuId;
    uni.$on("refresh", () => {
      this.list = [];
      this.mescroll.resetUpScroll();
    });
    this.dataAll();
    this.upCallback();
  },
  onUnload() {
    uni.$off("refresh");
  },
  methods: {
    open111(index) {
      uni.navigateTo({
        url: `/pages/apply/onlearn/course_details/index?id=3&num=${index}&listid=${this.list[index].F_Id}`,
        fail: (err) => {
          this.$u.toast("暂无此页面");
        },
      });
    },

    dataAll() {},
    closeData(e) {
      if (e == 1) {
        // this.reset()
      }
    },
    upCallback(page) {
      //             for(let i in this.searchForm){
      // 	if(!this.searchForm[i]){
      // 		delete this.searchForm[i]
      // 	}
      // }

      request({
        url: "/api/system/DataInterface/353803533302105349/Actions/Response",
        method: "get",
      })
        .then((res) => {
          console.log(res.data.data);
          for (let i = 0; i < res.data.data.length; i++) {
            console.log(res.data.data[i].F_Classtype);
            if (res.data.data[i].F_Classtype == "353796849649321221") {
              this.list.push(res.data.data[i]);
            }
            this.list[i].F_Img =
              "http://1.192.217.27:20000" +
              JSON.parse(this.list[i].F_Img)[0].url;
          }
          console.log(JSON.parse(this.list[0].F_Img));

          console.log(this.list);
        })
        .catch(() => {});
    },
    handleClick(index, index1) {
      const item = this.list[index];
      request({
        url: "/api/example/Mt_safe_archives/" + item.id,
        method: "delete",
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          complete: () => {
            this.$u.toast(res.msg);
            this.list.splice(index, 1);
            if (!this.list.length) this.mescroll.showEmpty();
          },
        });
      });
    },
    open(index) {
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    search() {
      if (this.isPreview == "1") return;
      this.searchTimer && clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.list = [];
        this.mescroll.resetUpScroll();
      }, 300);
    },
    goDetail(id, status) {
      let btnType = "";
      let btnList = [];
      btnList.push("btn_edit");
      btnList.push("btn_detail");
      if (btnList.includes("btn_detail")) {
        btnType = "btn_detail";
      }
      if (btnList.includes("btn_edit")) {
        btnType = "btn_edit";
      }
      if (!btnType) return;
      this.jumPage(id, status, btnType);
    },
    addPage() {
      this.jumPage();
    },
    jumPage(id, status, btnType) {
      if (!id && !status) btnType = "btn_add";
      uni.navigateTo({
        url: id
          ? "./form?menuId=" +
            this.menuId +
            "&jurisdictionType=" +
            btnType +
            "&id=" +
            id
          : "./form?menuId=" + this.menuId + "&jurisdictionType=" + btnType,
      });
    },
    cellClick(item) {
      if (this.sortValue === item.value) return;
      this.listQuery.sort = item.sort;
      this.listQuery.sidx = item.sidx;
      this.sortValue = item.value;
      this.$refs.uDropdown.close();
      this.$nextTick(() => {
        this.list = [];
        this.mescroll.resetUpScroll();
      });
    },
    reset() {
      this.$refs.searchForm.resetFields();
    },
    closeDropdown() {
      this.$refs.uDropdown.close();
      this.$nextTick(() => {
        this.list = [];
        this.mescroll.resetUpScroll();
      });
    },
    dataList(data) {
      let _list = [];
      for (let i = 0; i < data.list.length; i++) {
        let _data = data.list[i];
        _data.gender = JSON.parse(_data.gender);
        _data.health = JSON.parse(_data.health);
        _list.push(_data);
      }
      return _list;
    },
  },
};
</script>

<style lang="scss">
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margint: 0;
}
page {
  background-color: #f0f2f6;
  height: 100%;
  /* #ifdef MP-ALIPAY */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* #endif */

  .learn-list-container {
    padding: 20rpx;
    .list-card {
      display: flex;
      align-items: flex-start;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      .fm-box {
        width: 35%;
        height: 200rpx;
        flex-shrink: 0;
        margin-right: 15rpx;
        border-radius: 16rpx;
        overflow: hidden;
      }
      .mesagess-box {
        width: 100%;
        .course-name {
          font-size: 30rpx;
          color: #333333;
          // min-height: 84rpx;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
        }
        .course-num {
          font-size: 26rpx;
          color: #797f85;
          margin: 10rpx;
        }
        .messafe-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          .progress {
            display: flex;
            align-items: center;
            .progress-text {
              color: #1776ce;
            }
          }
        }
      }
    }
  }
}
</style>
